<template>
  <page-meta>
    <navigation-bar
      title="发布吐槽交流" 
      background-color="#5896f5"
    />
  </page-meta>
  <view class="content">
    <uni-section title="标题" type="line">
      <uni-easyinput
        v-model="data.title"
        class="input_title"
        placeholder="请输入完整问题(必填,5-31个字)"
        placeholder-style="font-weight:bold;"
        :maxlength="31"
        :trim="true"
        :styles="styles"
        :input-border="false"
      />
    </uni-section>
    <view>
      <text class="text_title_number">{{ data.title.length }}/31</text>
    </view>
    <uni-section title="内容" type="line">
      <view style="padding: 0px 10px; 0px 10px">
        <uni-easyinput 
          v-model="data.content"
          class="input_content"
          type="textarea"
          :trim="true" 
          :auto-height="true"
          placeholder="请输入补充描述(选填,不多于500个字)"
          :maxlength="500"
          :styles="styles"
          :input-border="false" 
        />
      </view>
    </uni-section>
    <view>
      <text class="text_title_number">{{ data.content.length }}/500</text>
    </view>
    <view style="margin-top: 30px;width: auto;">
      <uni-file-picker
        v-model="upLoadFileList"
        mode="grid"
        :image-styles="imageStyles"
        @progress="progress" 
        @success="success" 
        @fail="fail"
        @select="select"
        @delete="deleteFile"
      />
    </view>
    <view style="margin-top: 60px;">
      <button
        :class="data.title.length >= 5 ? 'button_send' : 'button_send_disable'"
        size="mini"
        @click="clickSend()"
      >
        发布
      </button>
    </view>
  </view>
</template>

<script>
import { publishArticle } from '@/common/api/article.js'
	
export default {
  data() {
    return {
      data: {
        title: '',
        content: '',
        imageList: []
      },
      upLoadFileList: [],
      styles: {
        color: 'black'
      },
      imageStyles: {
        'height': 125,
        'width': 125,
        'border': { // 如果为 Boolean 值，可以控制边框显示与否
          'color': '#eee',		// 边框颜色
          'width': '1px',		// 边框宽度
          'style': 'solid' 	// 边框样式
        }
      },
      fileValue: [
        {
          'name': 'file.txt',
          'extname': 'txt',
          'url': 'https://xxxx'
          // ...
        }
      ]
    }
  },
  onShow() {
    // 判断是否登录
    if (this.$store.state.user.userInfo === null) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
      uni.switchTab({
        url: '/pages/myself/index'
      })
    }
  },
  methods: {
    clickFileUpload() {
      uni.showToast({
        title: '该功能暂不支持',
        icon: 'none'
      })
    },
    clickSend() {
      if (this.data.title.length >= 5) {
        // 获取所有文件的地址
        this.data.uid = this.$store.state.user.userInfo.uid
        this.data.imageList = this.upLoadFileList.map(item => { return item.url })
		
        publishArticle(this.data)
          .then(res => {
            this.data.title = ''		// 清空内容 防止重复提交
            uni.showToast({
              title: '发布成功！'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          })
      }
    },
    // 获取上传状态
    select(e) {
      // console.log('选择文件：', e)
    },
    // 获取上传进度
    progress(e) {
      // console.log('上传进度：', e)
    },
    // 上传成功
    success(e) {
      // console.log('上传成功', e)
    },
    // 上传失败
    fail(e) {
      // console.log('上传失败：', e)
    },
    deleteFile(e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
	.image_icon{
		height: 25px;
		width: 25px;
	}
	.text_title_number{
		float: right;
		font-size: 12px;
		color: gray;
		margin-right: 10px;
	}
	.input_content{
		color: black;
		font-size: 15px;
		font-weight: bold;
		padding: 10px;
	}
	.button_send{
		color: white;
		background: dodgerblue;
		float: right;
		margin-right: 10px;
	}
	
	.button_send_disable{
		color: white;
		background: lightskyblue;
		float: right;
		margin-right: 10px;
	}
</style>
